<template>
  <div class="home p_y10">
    <CNavBar :bars="bars"/>
    <div class="tags">
      <div class="item active">
        精选推荐
      </div>
      <div class="item">
        距离最近
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue';
import {useToggleCollapse} from "@/hooks/ToggleCollapse";
import CNavBar from "@/components/common/CNavBar.vue";


export default defineComponent({
  name: 'Home',
  components: {
    CNavBar,
  },
  setup() {
    return {
      ...useToggleCollapse(),
    }
  },
  data() {
    return {
      bars: [
        {label: '全部商品'},
        {label: '芒果'},
        {label: '护肤品'},
        {label: '美妆'},
      ]
    }
  }
});
</script>

<style lang="less">
.home {
  .tags {
    .item {
      &.active {
        background-color: #F6E3E2;
        color: @primaryColor;
      }
    }
  }
}
</style>
